<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FILM</title>
    <link rel="icon" href="./font/marvel.png" type="image/x-icon" />
    <link rel="stylesheet" href="./assets/animate.css">
    <link rel="stylesheet" href="./assets/reset.css">
    <link rel="stylesheet" href="./css/film.css">

</head>

<body>
    <div class="box">
        <ul class="animated lightSpeedIn nav">
            <li>
                <a href="hero.html">
                    <img src="./font/marvel.png" alt="logo">
                </a>
            </li>
            <li id="li_btn">
                <a href="hero.html">
                    HERO
                </a>
                <ul id="nav_two" class=" nav_two">
                    <li class="animated zoomIn " id="thor">Thor</li>
                    <li class="animated zoomIn " id="hulk">Hulk</li>
                    <li class="animated zoomIn " id="widow">Widow</li>
                </ul>
            </li>
            <li>
                <a href="film.html">
                    FILM
                </a>
            </li>
        </ul>
        <div id="con" class="con">
            <ul id="one" class="animated zoomIn">
                <li>
                    <img src="./img/ironman1.jpg" alt="ironman">
                    <span>钢铁侠</span>
                </li>
                <li>
                    <img src="./img/spider1.jpg" alt='spiderman'>
                    <span>蜘蛛侠</span>
                </li>
                <li>
                    <img src="./img/thor1.jpg" alt='Thor'>
                    <span>雷神</span>
                </li>
                <li>
                    <img src="./img/avengers1.jpg" alt='avengers'>
                    <span>复仇者联盟</span>
                </li>
            </ul>
            <ul id="two" class="animated zoomIn">
                <li>
                    <img src="./img/captain1.jpg" alt="captain">
                    <span>美国队长</span>
                </li>
                <li>
                    <img src="./img/galaxy1.jpg" alt="galaxy">
                    <span>银河拯救队</span>
                </li>
                <li>
                    <img src="./img/deadpool.jpg" alt="deadpool">
                    <span>死侍</span>
                </li>
                <li>
                    <img src="./img/ant1.jpg" alt="antman">
                    <span>蚁人</span>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="./img/marvel.jpg" alt="marvel">
                    <span>惊奇队长</span>
                </li>
            </ul>

            <!-- 弹窗 -->
            <ul id="ironman" class="pop animated zoomIn">
                <li>
                    <img src="./img/ironman1.jpg" alt="钢铁侠1">
                    <span>钢铁侠</span>
                </li>
                <li>
                    <img src="./img/ironman2.jpg" alt="钢铁侠2">
                    <span>钢铁侠2</span>
                </li>
                <li>
                    <img src="./img/ironman3.jpg" alt="钢铁侠3">
                    <span>钢铁侠3</span>
                </li>
            </ul>
            <ul id="spiderman" class="pop animated zoomIn ">
                <li >
                    <img src="./img/spider1.jpg" alt="蜘蛛侠:英雄归来">
                    <span>
                        蜘蛛侠1
                    </span>
                </li>
                <li >
                    <img src="./img/spider2.jpg" alt="蜘蛛侠:英雄远征">
                    <span>蜘蛛侠2</span>
                </li>
                <li >
                    <img src="./img/superspider1.jpg" alt="超凡蜘蛛侠">
                    <span>超凡蜘蛛侠</span> </li>
                <li >
                    <img src="./img/superspider2.jpg" alt="超凡蜘蛛侠2">
                    <span>超凡蜘蛛侠2</span> </li>
                <li >
                    <img src="./img/oldspider1.jpg" alt="蜘蛛侠">
                    <span>蜘蛛侠</span> </li>
                <li >
                    <img src="./img/oldspider2.jpg" alt="蜘蛛侠2">
                    <span>蜘蛛侠2</span> </li>
                <li >
                    <img src="./img/oldspider3.jpg" alt="蜘蛛侠3">
                    <span>蜘蛛侠3</span> </li>
            </ul>
            <ul id="Thor" class="pop animated zoomIn">
                <li>
                    <img src="./img/thor1.jpg" alt="雷神">
                    <span>雷神</span>
                </li>
                <li>
                    <img src="./img/thor2.jpg" alt="雷神2">
                    <span>雷神2</span>
                </li>
                <li>
                    <img src="./img/thor3.jpg" alt="雷神3">
                    <span>雷神3</span>
                </li>
            </ul>
            <ul id="avengers" class="pop animated zoomIn">
                <li><img src="./img/avengers1.jpg" alt="复联1"><span>复联1</span></li>
                <li><img src="./img/avengers2.jpg" alt="复联1"><span>复联2</span></li>
                <li><img src="./img/avengers3.jpg" alt="复联1"><span>复联3</span></li>
                <li><img src="./img/avengers4.jpg" alt="复联1"><span>复联4</span></li>
            </ul>
            <ul id="captain" class="pop animated zoomIn">
                <li> <img src="./img/captain1.jpg" alt="美队"> <span>美国队长1</span> </li>
                <li> <img src="./img/captain2.jpg" alt="美队"> <span>美国队长2</span> </li>
                <li> <img src="./img/captain3.jpg" alt="美队"> <span>美国队长3</span> </li>
            </ul>
            <ul id="galaxy" class="pop animated zoomIn">
                <li> <img src="./img/galaxy1.jpg" alt="银河拯救队"> <span>银河拯救队</span> </li>
                <li> <img src="./img/galaxy2.jpg" alt="银河拯救队2"> <span>银河拯救队2</span> </li>
            </ul>
            <ul id="deadpool" class="pop animated zoomIn">
                <li> <img src="./img/deadpool.jpg" alt="死侍"> <span>死侍</span> </li>
                <li> <img src="./img/deadpool2.jpg" alt="死侍2"> <span>死侍2</span> </li>
            </ul>
            <ul id="antman" class="pop animated zoomIn">
                <li> <img src="./img/ant1.jpg" alt="蚁人"> <span>蚁人</span> </li>
                <li> <img src="./img/ant2.jpg" alt="蚁人2"> <span>蚁人2</span> </li>
            </ul>
        </div>

    </div>

</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/film.js"></script>

</html>